<template>
  <div class="plan-cover">
    <el-form :model="params">
      <el-row :gutter="24">
        <form-item v-model="formItem" />
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import FormItem from './components/FormItem.vue'
  import moment from 'moment'

  export default {
    name: 'planCover',
    components: { FormItem },
    mixins: [],
    props: {},
    data() {
      return {
        params: {
          cityId: '',
          countyId: '',
          pdate: moment().subtract(1, 'month').startOf('month').format('YYYYMM')
        },
        formItem: []
      }
    },
    computed: {},
    watch: {
      params: {
        handler(newValue) {
          console.log('%c [ newValue ]-66', 'font-size:13px; background:#7dd3ee; color:#c1ffff;', newValue)
        },
        deep: true
      }
    },
    filter: {},
    created() {
      this.formItem = [
        {
          span: 8,
          type: 'select',
          label: '地市',
          dataKey: 'cityId',
          dataValue: this.params.cityId,
          placeHolder: '选择地市',
          size: 'mini',
          options: [
            { id: 1, name: '1' },
            { id: 2, name: '2' }
          ]
        },
        {
          span: 8,
          type: 'select',
          label: '区县',
          dataKey: 'countyId',
          dataValue: this.params.countyId,
          placeHolder: '选择区县',
          size: 'mini',
          options: [
            { id: 1, name: '1' },
            { id: 2, name: '2' }
          ]
        },
        {
          span: 8,
          type: 'datePicker',
          dateType: 'month',
          valueFormat: 'yyyyMM',
          clearAble: false,
          editAble: false,
          label: '日期',
          dataKey: 'pdate',
          dataValue: this.params.pdate,
          placeHolder: '选择日期',
          size: 'mini'
        }
      ]
    },
    mounted() {},
    activated() {},
    updated() {},
    methods: {}
  }
</script>

<style lang="less" scoped></style>
